<template>
  <view class="profile-container">
    <scroll-view :scroll-y="true" class="scroll-view">
      <!-- 顶部轮播 -->
      <uv-swiper
        :list="swiperList"
        keyName="url"
        :height="300"
        :autoplay="false"
        @change="(e: any) => currentSwiper = e.current"
        indicator
        indicatorMode="dot"
        indicatorStyle="bottom: 10px"
      >
        <template v-slot:indicator>
          <view class="custom-indicator">
            {{ currentSwiper + 1 }}/{{ swiperList.length }}
          </view>
        </template>
      </uv-swiper>

      <!-- 个人资料 -->
      <view class="info-section">
        <view class="left">
          <text class="name">甜甜</text>
          <view class="stats">
            <text class="stat-item">23</text>
            <text class="stat-item">163/110KG</text>
          </view>
          <view class="tags">
            <text class="tag">已认证</text>
            <text class="tag">⭐ 5</text>
            <text class="tag">📍 897.64m</text>
          </view>
          <text class="signature">性格开朗 温柔活泼</text>
        </view>
        <view class="right">
          <uv-button
            type="primary"
            shape="circle"
            size="small"
            text="+ 关注"
            :customStyle="{
              backgroundColor: '#ffde58',
              color: '#333',
              border: 'none',
            }"
          ></uv-button>
        </view>
      </view>

      <!-- Tabs 切换 -->
      <view class="tabs-section">
        <uv-tabs
          :list="tabList"
          @change="handleTabChange"
          :current="currentTab"
        ></uv-tabs>
      </view>

      <!-- 内容区域 -->
      <view v-if="currentTab === 0" class="content-section">
        <!-- 服务列表 -->
        <view class="service-list">
          <view class="service-item" v-for="item in serviceList" :key="item.id">
            <image :src="item.image" class="service-image"></image>
            <view class="service-details">
              <text class="service-title">{{ item.title }}</text>
              <text class="service-price">¥{{ item.price }}/小时</text>
              <text class="service-desc">{{ item.desc }}</text>
              <view class="service-footer">
                <text class="service-tag">{{ item.tag }}</text>
                <uv-button
                  type="primary"
                  shape="circle"
                  size="mini"
                  text="预约"
                  :customStyle="{
                    backgroundColor: '#ffde58',
                    color: '#333',
                    border: 'none',
                  }"
                  @click="navigateToServiceDetail(item)"
                ></uv-button>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="content-section">
        <!-- 动态列表 -->
        <text>动态内容</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 顶部轮播
const currentSwiper = ref(0);
const swiperList = ref([
  { type: "video", url: "https://www.w3schools.com/html/mov_bbb.mp4", poster: "/static/images/fall1.jpg" },
  { type: "image", url: "/static/images/fall1.jpg" },
  { type: "image", url: "/static/images/fall2.jpg" },
  { type: "image", url: "/static/images/fall3.jpg" },
]);

// Tabs
const tabList = ref([{ name: "服务" }, { name: "动态" }]);
const currentTab = ref(0);
const handleTabChange = (item: any) => {
  currentTab.value = item.index;
};

// 模拟当前达人信息
const companion = ref({
  id: '1001',
  name: '甜甜',
});

// 服务列表
const serviceList = ref([
  {
    id: 1,
    image: "/static/images/service1.jpg",
    title: "寻味美食",
    price: "210.00",
    desc: "“吃懂一座城的 N 种方式”",
    tag: "3小时起订",
  },
  {
    id: 2,
    image: "/static/images/service2.jpg",
    title: "午夜烧烤",
    price: "249.00",
    desc: "“无人问我粥可温，但有人约我烤串香”",
    tag: "3小时起订",
  },
]);

const navigateToServiceDetail = (service: any) => {
  uni.navigateTo({
    url: `/pages/order-payment/index?companionId=${companion.value.id}&serviceId=${service.id}`,
  });
};
</script>

<style lang="scss" scoped>
.profile-container {
  height: 100vh;
}

.scroll-view {
  height: 100%;
}

.custom-indicator {
  position: absolute;
  right: 20px;
  bottom: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 12px;
  z-index: 2;
}

.info-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 15px;
  background-color: #fff;
}

.left {
  .name {
    font-size: 22px;
    font-weight: bold;
    display: block;
  }
  .stats {
    display: flex;
    margin-top: 8px;
    .stat-item {
      font-size: 14px;
      color: #666;
      margin-right: 10px;
    }
  }
  .tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
    .tag {
      font-size: 12px;
      background-color: #f3f4f6;
      padding: 3px 8px;
      border-radius: 4px;
      margin-right: 8px;
      margin-bottom: 5px;
    }
  }
  .signature {
    font-size: 13px;
    color: #999;
    margin-top: 8px;
    display: block;
  }
}

.tabs-section {
  margin-top: 10px;
  background-color: #fff;
}

.content-section {
  padding: 15px;
}

.service-list {
  .service-item {
    display: flex;
    background-color: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    .service-image {
      width: 100px;
      height: 100px;
      border-radius: 8px;
      margin-right: 12px;
      flex-shrink: 0;
    }
    .service-details {
      display: flex;
      flex-direction: column;
      flex: 1;
      .service-title {
        font-size: 16px;
        font-weight: bold;
      }
      .service-price {
        font-size: 16px;
        font-weight: bold;
        color: #ff5050;
        margin-top: 8px;
      }
      .service-desc {
        font-size: 13px;
        color: #666;
        margin-top: 8px;
      }
      .service-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        .service-tag {
          font-size: 11px;
          background-color: #f3f4f6;
          padding: 3px 6px;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>
